<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> {{ myFormTitle }} </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container" v-if="listVisible">
            <div class="handle-box">
                 <el-form ref="searchForm" label-width="80px" :inline="true">
                    <el-form-item label="筛选条件">
                        <el-input placeholder="门店编号、名称" class="handle-input mr10" v-model="query.FilterPara"></el-input>
                    </el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                    <el-button type="primary" icon="el-icon-plus" @click="handleCreate">新建</el-button>
                    <!-- <el-button type="primary" icon="el-icon-folder-add" @click="getFile">上传</el-button> -->
                    <input
                        id="app"
                        ref="uploadExcel"
                        type="file"
                        @change="importfxx(this)"
                        style="display: none;"
                        accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
                    />
                </el-form>
            </div>
            
            <el-table :data="tableData" border class="table" header-cell-class-name="table-header" v-loading="listLoading">
                <el-table-column prop="FID" label="FID" v-if="false"></el-table-column>
                <el-table-column prop="FNo" fixed label="门店编号"></el-table-column>
                <el-table-column prop="FName" fixed label="门店名称"></el-table-column>
                <el-table-column prop="FLevel" fixed label="门店级别"></el-table-column>
                <el-table-column prop="FAreaNo" fixed v-if="false"></el-table-column>
                <el-table-column prop="FAreaName" fixed label="所属区域"></el-table-column>
                <el-table-column prop="FJiaQty" fixed label="甲班定编人数"></el-table-column>
                <el-table-column prop="FYiQty" fixed label="乙班定编人数"></el-table-column>
                <el-table-column prop="FContact" label="联系人"></el-table-column>
                <el-table-column prop="FAddress" label="地址"></el-table-column>
                <el-table-column prop="FRemarks" label="备注"></el-table-column>
                <el-table-column label="操作" width="250" align="center" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)"
                            >删除</el-button
                        >
                        <el-button type="text" icon="el-icon-setting" @click="handleMaintainTarget(scope.$index, scope.row)"
                            >业绩目标</el-button
                        >
                        <!-- <el-button type="text" icon="el-icon-copy-document" @click="handleCopyTarget(scope.$index, scope.row)">复制业绩</el-button> -->
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="query.FPageIndex"
                    :page-size="query.FPageSize"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>

        <div class="container" v-if="shopTargetDivShow">
            <div class="handle-box">
                <el-form ref="formhead" :model="formhead" label-width="80px" :inline="true">
                    <el-form-item label="门店编号">
                        <el-input v-model="formhead.detailShopNo" class="handle-input mr10" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="门店名称">
                        <el-input v-model="formhead.detailShopName" class="handle-input mr10" :disabled="true"></el-input>
                    </el-form-item>

                    <el-button type="primary" icon="el-icon-refresh-left" @click="handleReturn">返回数据清单</el-button>
                    <!-- <el-button type="primary" icon="el-icon-copy-document" @click="handleCopy">复制其他门店业绩</el-button> -->
                </el-form>
            </div>

            <el-tabs v-model="activeName">
                <el-tab-pane label="年度业绩目标" name="first">
                    <el-form ref="formYear" :model="formYear" label-width="110px">
                        <!-- :rules="yearrules" -->
                        <el-form-item label="年" prop="yearTargetYear">
                            <el-date-picker
                                v-model="formYear.yearTargetYear"
                                @change="yearchangedate"
                                format="yyyy"
                                value-format="yyyy"
                                type="year"
                                placeholder="选择年"
                            ></el-date-picker>
                        </el-form-item>
                        <el-form-item label="班组" prop="yearrdoptions">
                            <el-radio-group v-model="formYear.yearrdoptions" @change="rdChange">
                                <el-radio style="margin-left:20px;" label="甲">甲</el-radio>
                                <el-radio label="乙">乙</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="年度业绩目标" prop="yearTarget">
                            <el-input
                                type="number"
                                v-model="formYear.yearTarget"
                                class="handle-input mr10"
                                placeholder="请输入年度业绩目标"
                            ></el-input>
                        </el-form-item>

                        <el-button type="danger" @click="saveYearTarget">保 存</el-button>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="月度业绩目标" name="second">
                    <el-form ref="formMonth" :model="formMonth" label-width="100px">
                        <el-form label-width="110px" :inline="true">
                            <el-form-item label="年" prop="yearTargetYear">
                                <el-date-picker
                                    v-model="formMonth.yearTargetYear"
                                    @change="monthtabyearchange"
                                    type="year"
                                    format="yyyy"
                                    value-format="yyyy"
                                    placeholder="选择年"
                                ></el-date-picker>
                            </el-form-item>

                            <el-form-item label="班组" prop="yearrdoptions">
                                <el-radio-group v-model="formMonth.yearrdoptions" @change="monthrdchange">
                                    <el-radio style="margin-left:20px;" label="甲">甲</el-radio>
                                    <el-radio label="乙">乙</el-radio>
                                </el-radio-group>
                            </el-form-item>

                            <el-button type="danger" @click="saveMonthTarget" style="margin-left:40px;">保 存</el-button>
                        </el-form>

                        <el-form label-width="110px" :inline="true">
                            <el-form-item label="1月业绩目标" prop="janTarget">
                                <el-input
                                    type="number"
                                    v-model="formMonth.janTarget"
                                    class="handle-input mr10"
                                    placeholder="请输入1月业绩目标"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="2月业绩目标" prop="febTarget">
                                <el-input
                                    type="number"
                                    v-model="formMonth.febTarget"
                                    class="handle-input mr10"
                                    placeholder="请输入2月业绩目标"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="3月业绩目标" prop="marTarget">
                                <el-input
                                    type="number"
                                    v-model="formMonth.marTarget"
                                    class="handle-input mr10"
                                    placeholder="请输入3月业绩目标"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="4月业绩目标" prop="aprTarget">
                                <el-input
                                    type="number"
                                    v-model="formMonth.aprTarget"
                                    class="handle-input mr10"
                                    placeholder="请输入4月业绩目标"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="5月业绩目标" prop="mayTarget">
                                <el-input
                                    type="number"
                                    v-model="formMonth.mayTarget"
                                    class="handle-input mr10"
                                    placeholder="请输入5月业绩目标"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="6月业绩目标" prop="junTarget">
                                <el-input
                                    type="number"
                                    v-model="formMonth.junTarget"
                                    class="handle-input mr10"
                                    placeholder="请输入6月业绩目标"
                                ></el-input>
                            </el-form-item>

                            <el-form-item label="7月业绩目标" prop="julTarget">
                                <el-input
                                    type="number"
                                    v-model="formMonth.julTarget"
                                    class="handle-input mr10"
                                    placeholder="请输入7月业绩目标"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="8月业绩目标" prop="augTarget">
                                <el-input
                                    type="number"
                                    v-model="formMonth.augTarget"
                                    class="handle-input mr10"
                                    placeholder="请输入8月业绩目标"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="9月业绩目标" prop="sepTarget">
                                <el-input
                                    type="number"
                                    v-model="formMonth.sepTarget"
                                    class="handle-input mr10"
                                    placeholder="请输入9月业绩目标"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="10月业绩目标" prop="octTarget">
                                <el-input
                                    type="number"
                                    v-model="formMonth.octTarget"
                                    class="handle-input mr10"
                                    placeholder="请输入10月业绩目标"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="11月业绩目标" prop="novTarget">
                                <el-input
                                    type="number"
                                    v-model="formMonth.novTarget"
                                    class="handle-input mr10"
                                    placeholder="请输入11月业绩目标"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="12月业绩目标" prop="decTarget">
                                <el-input
                                    type="number"
                                    v-model="formMonth.decTarget"
                                    class="handle-input mr10"
                                    placeholder="请输入12月业绩目标"
                                ></el-input>
                            </el-form-item>
                        </el-form>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="当天业绩目标" name="third">
                    <el-form ref="formDay" :model="formDay" label-width="100px">
                        <el-form-item label="年月日区间">
                            <el-date-picker
                                v-model="formDay.daterangeTarget"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                            ></el-date-picker>
                        </el-form-item>
                        <el-form-item label="班组" prop="yearrdoptions">
                            <el-radio-group v-model="formDay.yearrdoptions">
                                <el-radio style="margin-left:20px;" label="甲">甲</el-radio>
                                <el-radio label="乙">乙</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="天业绩目标">
                            <el-input
                                type="number"
                                v-model="formDay.dayTarget"
                                class="handle-input mr10"
                                placeholder="请输入每天业绩目标"
                            ></el-input>
                        </el-form-item>

                        <el-button type="danger" @click="saveDayTarget">保 存</el-button>
                    </el-form>

                    <el-table
                        :data="tableDayData"
                        border
                        class="table"
                        header-cell-class-name="table-header"
                        v-loading="listLoading"
                        style="margin-top:20px;"
                    >
                        <el-table-column prop="FDay" label="日期"></el-table-column>
                        <el-table-column prop="FBanZu" label="班组"></el-table-column>
                        <el-table-column prop="FTarget" label="当天业绩目标"></el-table-column>
                    </el-table>
                    <div class="pagination">
                        <el-pagination
                            background
                            layout="total, prev, pager, next"
                            :current-page="formDay.FPageIndex"
                            :page-size="formDay.FPageSize"
                            :total="pageTotalDayaTarget"
                            @current-change="handlePageChangeDayTarget"
                        ></el-pagination>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>

        <!-- 编辑修改弹出框 -->
        <el-dialog :title="showDialogTitle" :visible.sync="editVisible" width="30%">
            <el-form ref="editForm" :model="editForm" label-width="100px" :rules="rules">
                <el-form-item label="FID" prop="FMMFID" v-if="false">
                    <el-input v-model="editForm.FMMFID" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="门店编号" prop="FMMShopNo">
                    <el-input v-model="editForm.FMMShopNo" :disabled="disableNo"></el-input>
                </el-form-item>
                <el-form-item label="门店名称" prop="FMMShopName">
                    <el-input v-model="editForm.FMMShopName"></el-input>
                </el-form-item>
                <el-form-item fixed label="门店级别">
                    <el-select v-model="editForm.FMMShopLevel" placeholder="请选择门店级别" style="width:100%">
                        <el-option v-for="item in options" :key="item.level" :label="item.level" :value="item.level"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item fixed label="所属区域">
                    <el-select v-model="value" placeholder="请选择区域" @change="currStationChange" style="width:100%">
                        <el-option v-for="item in editValue" :key="item.FAreaNo" :label="item.FAreaName" :value="item.FAreaNo">
                            <span style="float: left">{{ item.FAreaName }}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.FAreaNo }}</span>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="甲班定编人数" prop="jiaPersonQty">
                    <el-input
                        style="width:100%"
                        type="number"
                        v-model="editForm.jiaPersonQty"
                        class="handle-input mr10"
                        placeholder="请输入甲班定编人数"
                    ></el-input>
                </el-form-item>
                <el-form-item label="乙班定编人数" prop="yiPersonQty">
                    <el-input
                        style="width:100%"
                        type="number"
                        v-model="editForm.yiPersonQty"
                        class="handle-input mr10"
                        placeholder="请输入乙班定编人数"
                    ></el-input>
                </el-form-item>
                <el-form-item label="联系人" prop="FMMShopContact">
                    <el-input v-model="editForm.FMMShopContact"></el-input>
                </el-form-item>
                <el-form-item label="地址" prop="FMMShopAddress">
                    <el-input v-model="editForm.FMMShopAddress"></el-input>
                </el-form-item>
                <el-form-item label="备注" prop="FMMShopRemarks">
                    <el-input type="textarea" :rows="2" v-model="editForm.FMMShopRemarks"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>

        <!--编辑新增弹出框-->
        <el-dialog :title="showDialogTitle" :visible.sync="dialogVisible" width="30%" @close="closeDialog">
            <el-form ref="form" :model="form" label-width="100px" :rules="rules">
                <el-form-item label="门店编号" prop="FMMShopNo">
                    <el-input v-model="form.FMMShopNo" :disabled="disableNo"></el-input>
                </el-form-item>
                <el-form-item label="门店名称" prop="FMMShopName">
                    <el-input v-model="form.FMMShopName"></el-input>
                </el-form-item>
                <el-form-item fixed label="门店级别">
                    <el-select v-model="form.FMMShopLevel" placeholder="请选择门店级别" style="width:100%">
                        <el-option v-for="item in options" :key="item.level" :label="item.level" :value="item.level"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item fixed label="所属区域">
                    <el-select v-model="value" placeholder="请选择区域" @change="currStationChange1" style="width:100%">
                        <el-option v-for="item in addValue" :key="item.FAreaNo" :label="item.FAreaName" :value="item.FAreaNo">
                            <span style="float: left">{{ item.FAreaName }}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.FAreaNo }}</span>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="甲班定编人数" prop="jiaPersonQty">
                    <el-input
                        type="number"
                        style="width:100%"
                        v-model="form.jiaPersonQty"
                        class="handle-input mr10"
                        placeholder="请输入甲班定编人数"
                    ></el-input>
                </el-form-item>
                <el-form-item label="乙班定编人数" prop="yiPersonQty">
                    <el-input
                        type="number"
                        style="width:100%"
                        v-model="form.yiPersonQty"
                        class="handle-input mr10"
                        placeholder="请输入乙班定编人数"
                    ></el-input>
                </el-form-item>
                <el-form-item label="联系人" prop="FMMShopContact">
                    <el-input v-model="form.FMMShopContact"></el-input>
                </el-form-item>
                <el-form-item label="地址" prop="FMMShopAddress">
                    <el-input v-model="form.FMMShopAddress"></el-input>
                </el-form-item>
                <el-form-item label="备注" prop="FMMShopRemarks">
                    <el-input type="textarea" :rows="2" v-model="form.FMMShopRemarks"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveAdd">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { fetchDataFromApi } from '../../api/apiService';
import { Loading } from 'element-ui';

let loading;
export default {
    name: 'basetable',
    data() {
        return {
            // banzuoptions: [{
            //     value: '甲',
            //     label: '甲'
            //     }, {
            //     value: '乙',
            //     label: '乙'
            //     }
            // ],
            editValue: [],
            value: '',
            addValue: [],
            options: [
                {
                    level: 'A'
                },
                {
                    level: 'B'
                },
                {
                    level: 'C'
                }
            ],
            areas: {
                FAreaNo: '',
                FAreaName: ''
            },
            formYear: {
                yearTargetYear: '',
                yearrdoptions: '甲',
                yearTarget: 0
            },
            formMonth: {
                yearTargetYear: '',
                yearrdoptions: '甲',
                janTarget: 0,
                febTarget: 0,
                marTarget: 0,
                aprTarget: 0,
                mayTarget: 0,
                junTarget: 0,
                julTarget: 0,
                augTarget: 0,
                sepTarget: 0,
                octTarget: 0,
                novTarget: 0,
                decTarget: 0
            },
            formDay: {
                daterangeTarget: '',
                yearrdoptions: '甲',
                dayTarget: 0,
                FPageIndex: 1,
                FPageSize: 5
            },
            activeName: 'first',
            formhead: {
                detailShopNo: '',
                detailShopName: ''
            },
            listVisible: true,
            shopTargetDivShow: false,
            myFormTitle: '门店管理 / 数据清单',
            query: {
                FilterPara: '',
                FPageIndex: 1,
                FPageSize: 10
            },
            pageTotalDayaTarget: 0,
            tableData: [],
            tableDayData: [],
            editVisible: false,
            dialogVisible: false,
            pageTotal: 0,
            showDialogTitle: '',
            disableNo: false,
            form: {
                FMMShopNo: '',
                FMMShopName: '',
                FMMShopLevel: '',
                FMMShopAreaNo: '',
                FMMShopAreaName: '',
                FMMShopContact: '',
                FMMShopAddress: '',
                FMMShopRemarks: '',
                jiaPersonQty: 0,
                yiPersonQty: 0
            },
            editForm: {
                FMMFID: '',
                FMMShopNo: '',
                FMMShopName: '',
                FMMShopLevel: '',
                FMMShopAreaNo: '',
                FMMShopAreaName: '',
                FMMShopContact: '',
                FMMShopAddress: '',
                FMMShopRemarks: '',
                jiaPersonQty: 0,
                yiPersonQty: 0
            },
            rules: {
                FMMShopNo: [{ required: true, message: '请输入门店编号', trigger: 'blur' }],
                FMMShopName: [{ required: true, message: '请输入门店名称', trigger: 'blur' }],
                FMMShopLevel: [{ required: true, message: '请选择门店级别', trigger: 'blur' }],
                value: [{ required: true, message: '请选择区域', trigger: 'blur' }]
            },
            yearrules: {
                yearTargetYear: [{ required: true, message: '请选择年份', trigger: 'blur' }],
                yearrdoptions: [{ required: true, message: '请选择班组', trigger: 'blur' }],
                yearTarget: [{ required: true, message: '请输入年度业绩目标', trigger: 'blur' }]
            },
            // monthrules1:
            // {
            //     yearTargetYear: [{ required: true, message: '请选择年份', trigger: 'blur' }]
            // },
            // monthrules2:
            // {
            //     janTarget: [{ required: true, message: '请输入1月业绩目标', trigger: 'blur' }],
            //     febTarget: [{ required: true, message: '请输入2月业绩目标', trigger: 'blur' }],
            //     marTarget: [{ required: true, message: '请输入3月业绩目标', trigger: 'blur' }],
            //     aprTarget: [{ required: true, message: '请输入4月业绩目标', trigger: 'blur' }],
            //     mayTarget: [{ required: true, message: '请输入5月业绩目标', trigger: 'blur' }],
            //     junTarget: [{ required: true, message: '请输入6月业绩目标', trigger: 'blur' }],
            //     julTarget: [{ required: true, message: '请输入7月业绩目标', trigger: 'blur' }],
            //     augTarget: [{ required: true, message: '请输入8月业绩目标', trigger: 'blur' }],
            //     sepTarget: [{ required: true, message: '请输入9月业绩目标', trigger: 'blur' }],
            //     octTarget: [{ required: true, message: '请输入10月业绩目标', trigger: 'blur' }],
            //     novTarget: [{ required: true, message: '请输入11月业绩目标', trigger: 'blur' }],
            //     decTarget: [{ required: true, message: '请输入12月业绩目标', trigger: 'blur' }]
            // },
            listLoading: false
        };
    },
    created() {
        this.getData();
        this.getAreaData();
    },
    methods: {
        currStationChange(val) {
            this.value = val;
            // console.log(val);
            this.editForm.FMMShopAreaNo = val;
            var obj = {};
            obj = this.editValue.find(item => {
                return item.FAreaNo === val;
            });
            this.editForm.FMMShopAreaName = obj.FAreaName;
        },
        currStationChange1(val) {
            this.addValue = val;
            // console.log(val);
            this.form.FMMShopAreaNo = val;
            var obj = {};
            obj = this.addValue.find(item => {
                return item.FAreaNo === val;
            });
            this.form.FMMShopAreaName = obj.FAreaName;
        },
        startLoading() {
            loading = Loading.service({
                lock: true,
                text: '处理中...',
                background: 'rgba(0, 0, 0, 0.7)'
            });
        },

        //保存年预算
        saveYearTarget() {
            this.$refs.formYear.validate(valid => {
                if (valid) {
                    this.formYear.ActionCode = 'AddShopYearBanZuTarget';
                    this.formYear.FShopNo = this.formhead.detailShopNo;
                    this.formYear.Token = localStorage.getItem('ms_token');
                    this.formYear.FUserNo = localStorage.getItem('ms_userno');

                    fetchDataFromApi(this.formYear).then(res => {
                        if (res != undefined && res != null && res != '') {
                            if (res.Message == 'OK') {
                                this.$message.success(res.Info);
                                //this.getData();
                            } else {
                                this.$message.error(res.Info);
                            }
                        }

                        //this.editVisible = false;
                    });
                }
            });
        },

        //保存月预算
        saveMonthTarget() {
            // this.$refs.formMonth.validate(valid => {
            //     if(valid)
            //     {

            //     }
            // });

            this.startLoading();

            this.formMonth.ActionCode = 'AddShopMonthTarget';
            this.formMonth.FShopNo = this.formhead.detailShopNo;
            this.formMonth.Token = localStorage.getItem('ms_token');
            this.formMonth.FUserNo = localStorage.getItem('ms_userno');

            fetchDataFromApi(this.formMonth).then(res => {
                if (res != undefined && res != null && res != '') {
                    if (res.Message == 'OK') {
                        this.$message.success(res.Info);
                    } else {
                        this.$message.error(res.Info);
                    }
                }

                loading.close();
            });
        },

        //保存日预算
        saveDayTarget() {
            if (this.formDay.daterangeTarget == undefined || this.formDay.daterangeTarget == null || this.formDay.daterangeTarget == '') {
                this.$message.error('请选择年月日区间');
                return;
            }

            if (this.formDay.dayTarget == undefined || this.formDay.dayTarget == null || this.formDay.dayTarget == '') {
                this.$message.error('请输入当天业绩目标');
                return;
            }

            this.startLoading();
            this.formDay.ActionCode = 'AddShopDayTarget';
            this.formDay.FShopNo = this.formhead.detailShopNo;
            this.formDay.Token = localStorage.getItem('ms_token');
            this.formDay.FUserNo = localStorage.getItem('ms_userno');

            this.formDay.FStartDate = this.formDay.daterangeTarget[0];
            this.formDay.FEndDate = this.formDay.daterangeTarget[1];

            fetchDataFromApi(this.formDay).then(res => {
                if (res != undefined && res != null && res != '') {
                    if (res.Message == 'OK') {
                        this.$message.success(res.Info);
                    } else {
                        this.$message.error(res.Info);
                    }
                }
                this.loadDatTableData();

                loading.close();
            });
        },

        getData() {
            this.listLoading = true;
            this.query.ActionCode = 'SearchShop';
            this.query.Token = localStorage.getItem('ms_token');
            fetchDataFromApi(this.query).then(res => {
                // console.log(JSON.stringify(res.data.items));
                // console.log(res);
                if (res != undefined && res != null && res != '') {
                    this.tableData = res.data.items;
                    this.pageTotal = res.data.total;
                }

                this.listLoading = false;
            });
        },

        loadDatTableData() {
            this.listLoading = true;
            this.formDay.ActionCode = 'SearchShopDayTarget';
            this.formDay.FShopNo = this.formhead.detailShopNo;
            this.formDay.Token = localStorage.getItem('ms_token');

            fetchDataFromApi(this.formDay).then(res => {
                if (res != undefined && res != null && res != '') {
                    this.tableDayData = res.data.items;
                    this.pageTotalDayaTarget = res.data.total;
                }

                this.listLoading = false;
            });
        },

        // 触发搜索按钮
        handleSearch() {
            this.$set(this.query, 'FPageIndex', 1);
            //this.query.FPageIndex = 1;
            this.getData();
        },
        // 触发新增按钮
        handleCreate(index, row) {
            this.showDialogTitle = '新建门店';
            this.disableNo = false;
            this.dialogVisible = true;
        },
        //复制门店业绩
        handleCopyTarget(index, row) {},
        //维护业绩目标
        handleMaintainTarget(index, row) {
            this.startLoading();
            this.listVisible = false;
            this.myFormTitle = '门店管理 / 业绩目标';
            this.shopTargetDivShow = true;

            this.formhead.detailShopNo = row.FNo;
            this.formhead.detailShopName = row.FName;

            var myDate = new Date();
            var myYear = myDate.getFullYear();

            this.formYear.yearrdoptions = '甲';
            this.formYear.yearTargetYear = myYear.toString();
            this.formMonth.yearTargetYear = myYear.toString();

            this.loadYearData();
            this.loadMonthData();
            this.loadDatTableData();

            this.formDay.dayTarget = 0;
            this.formDay.daterangeTarget = '';
            this.formDay.yearrdoptions = '甲';
            this.formDay.FPageIndex = 1;
            this.formDay.FPageSize = 5;

            loading.close();
        },
        yearchangedate() {
            this.loadYearData();
        },
        rdChange() {
            this.loadYearData();
        },
        //加载年度目标
        loadYearData() {
            this.formYear.FShopNo = this.formhead.detailShopNo;
            this.formYear.ActionCode = 'SearchShopYearBanZuTarget';
            this.formYear.Token = localStorage.getItem('ms_token');
            fetchDataFromApi(this.formYear).then(res => {
                if (res != undefined && res != null && res != '') {
                    this.formYear.yearTarget = res;
                } else {
                    this.formYear.yearTarget = '0';
                }
            });
        },

        monthtabyearchange() {
            this.loadMonthData();
        },

        monthrdchange() {
            this.loadMonthData();
        },

        //加载月目标
        loadMonthData() {
            this.formMonth.FShopNo = this.formhead.detailShopNo;
            this.formMonth.ActionCode = 'SearchShopMonthTarget';
            this.formMonth.Token = localStorage.getItem('ms_token');
            fetchDataFromApi(this.formMonth).then(res => {
                this.formMonth.janTarget = 0;
                this.formMonth.febTarget = 0;
                this.formMonth.marTarget = 0;
                this.formMonth.aprTarget = 0;
                this.formMonth.mayTarget = 0;
                this.formMonth.junTarget = 0;
                this.formMonth.julTarget = 0;
                this.formMonth.augTarget = 0;
                this.formMonth.sepTarget = 0;
                this.formMonth.octTarget = 0;
                this.formMonth.novTarget = 0;
                this.formMonth.decTarget = 0;

                if (res != undefined && res != null && res != '') {
                    this.formMonth.janTarget = res[0].FJan;
                    this.formMonth.febTarget = res[0].FFeb;
                    this.formMonth.marTarget = res[0].FMar;
                    this.formMonth.aprTarget = res[0].FApr;
                    this.formMonth.mayTarget = res[0].FMay;
                    this.formMonth.junTarget = res[0].FJun;
                    this.formMonth.julTarget = res[0].FJul;
                    this.formMonth.augTarget = res[0].FAug;
                    this.formMonth.sepTarget = res[0].FSep;
                    this.formMonth.octTarget = res[0].FOct;
                    this.formMonth.novTarget = res[0].FNov;
                    this.formMonth.decTarget = res[0].FDec;
                }
            });
        },

        //返回
        handleReturn() {
            this.listVisible = true;
            this.myFormTitle = '门店管理 / 数据清单';
            this.shopTargetDivShow = false;
        },
        //复制其他门店业绩
        handleCopy() {},
        // 删除操作
        handleDelete(index, row) {
            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', { type: 'warning' })
                .then(() => {
                    if (row != undefined && row != null && row != '') {
                        var myRowShopFID = row.FID;

                        var querypars = {};
                        querypars.ActionCode = 'DeleteShop';
                        querypars.Token = localStorage.getItem('ms_token');
                        querypars.FID = myRowShopFID;

                        fetchDataFromApi(querypars).then(res => {
                            if (res != undefined && res != null && res != '') {
                                if (res.Message == 'OK') {
                                    this.$message.success(res.Info);
                                    this.getData();
                                } else {
                                    this.$message.error(res.Info);
                                }
                            }
                        });
                    }
                })
                .catch(() => {});
        },
        // 编辑操作
        handleEdit(index, row) {
            
            this.showDialogTitle = '编辑门店';
            this.disableNo = true;
            this.editVisible = true;
            this.editForm.FMMShopLevel = row.FLevel;
            this.value = row.FAreaName;
            this.editForm.FMMFID = row.FID;
            this.editForm.FMMShopNo = row.FNo;
            this.editForm.FMMShopName = row.FName;
            this.editForm.FMMShopContact = row.FContact;
            this.editForm.FMMShopAddress = row.FAddress;
            this.editForm.FMMShopRemarks = row.FRemarks;
            this.editForm.jiaPersonQty = row.FJiaQty;
            this.editForm.yiPersonQty = row.FYiQty;
        },
        // 保存新增
        saveAdd() {
            // console.log(JSON.stringify(this.form));
            // console.log(JSON.stringify(this.editForm));
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.form.ActionCode = 'AddShop';

                    this.form.Token = localStorage.getItem('ms_token');
                    this.form.FUserNo = localStorage.getItem('ms_userno');

                    fetchDataFromApi(this.form).then(res => {
                        if (res != undefined && res != null && res != '') {
                            if (res.Message == 'OK') {
                                this.$message.success(res.Info);
                                this.getData();
                            } else {
                                this.$message.error(res.Info);
                            }
                        }
                        this.dialogVisible = false;
                    });
                }
            });
        },

        // 保存编辑
        saveEdit() {
            // console.log(JSON.stringify(this.form));
            // console.log(JSON.stringify(this.editForm));
            this.$refs.editForm.validate(valid => {
                if (valid) {
                    this.editForm.ActionCode = 'UpdateShop';
                    this.editForm.Token = localStorage.getItem('ms_token');
                    this.editForm.FUserNo = localStorage.getItem('ms_userno');

                    fetchDataFromApi(this.editForm).then(res => {
                        if (res != undefined && res != null && res != '') {
                            if (res.Message == 'OK') {
                                this.$message.success(res.Info);
                                this.getData();
                            } else {
                                this.$message.error(res.Info);
                            }
                        }

                        this.editVisible = false;
                    });
                }
            });
        },

        //获取区域数据
        getAreaData() {
            this.listLoading = true;
            var areaQuery = {};
            areaQuery.ActionCode = 'SearchAreaDistinct';
            areaQuery.Token = localStorage.getItem('ms_token');
            areaQuery.FilterPara = '';
            areaQuery.FPageIndex = 1;
            areaQuery.FPageSize = 10000;
            fetchDataFromApi(areaQuery).then(res => {
                if (res != undefined && res != null && res != '') {
                    var array = res.data.items;
                    // console.log(JSON.stringify(res.data).data);
                    for (let i = 0; i < array.length; i++) {
                        this.areas = {
                            FAreaNo: array[i].FAreaNo,
                            FAreaName: array[i].FAreaName
                        };
                        this.addValue.push(this.areas);
                        this.editValue.push(this.areas);
                    }
                    // console.log(JSON.stringify(this.addValue));
                    // console.log(JSON.stringify(this.editValue));
                }
                this.listLoading = false;
            });
        },

        // 分页导航
        handlePageChange(val) {
            this.$set(this.query, 'FPageIndex', val);
            this.getData();
        },

        handlePageChangeDayTarget(val) {
            this.$set(this.formDay, 'FPageIndex', val);
            this.loadDatTableData();
        },
        closeDialog() {
            this.$refs.form.clearValidate();
            this.form = {
                FMMShopNo: '',
                FMMShopName: '',
                FMMShopLevel: '',
                FMMShopAreaNo: '',
                FMMShopAreaName: '',
                FMMShopContact: '',
                FMMShopAddress: '',
                FMMShopRemarks: '',
                jiaPersonQty: 0,
                yiPersonQty: 0
            };
            this.value = '';
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 220px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
